<template>
	<view class="content">
		<block v-for="(item,index) in tiWenList" :key="index">
		<view class="top_time">{{item.createtime | filterFunc}}</view>
		<block v-if="item.is_my==0">
		<view class="left_box">
			<image :src="picture.getImgUrl(item.user.avatar)?picture.getImgUrl(item.user.avatar):''" mode=""></image>
			<view class="left_jt"></view>
			<view class="left_chat_con">{{item.question}}</view>
		</view>
		</block>
		<block v-if="item.is_my==1">
		<view class="right_box">
			<view class="right_chat_c">{{item.question}}</view>
			<view class="right_jt"></view>
			<image :src="picture.getImgUrl(item.user.avatar)?picture.getImgUrl(item.user.avatar):''" mode=""></image>
		</view>
		</block>
		</block>
		<view class="btm_box">
			<input type="text" value="" placeholder="我来说两句" placeholder-class="input_class" v-model="content" />
			<view class="btm_btn" @click="AddTiW">发送</view>
		</view>
	</view>
</template>

<script>
	import {question,
questionList} from '@/api/index.js'
	export default {
		data() {
			return {
				content:'',
				id:'',
				tiWenList:[],
			}
		},
		onLoad(option) {
			this.id=option.id
			this.getTiwen()
	
		},
		filters: {
			filterFunc: function(value) {
				if (value && value.length > 11) {
					return value.substring(11, 19) + ' ';
				}
				return value;
			}
		},
		methods: {
		    AddTiW(){
				var obj = {
					c_id:this.id,
					question:this.content
				};
				question(obj).then(res => {
					if (res.code == 1) {
						this.getTiwen()
						this.content=''
					}else{
						this.$msg(res.msg)
					}
					
				});
			},
			getTiwen(){
				var obj = {
					c_id:this.id,
					page:1,
					pageSize:100
				};
				questionList(obj).then(res => {
					if (res.code == 1) {
						this.tiWenList=res.data
					}else{
						
					}
				});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100vh;
		overflow: auto;
		padding: 0 30rpx;
	}
	.top_time{
		width: 100%;
		height: 97rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.left_box{
		width: 100%;
		min-height: 80rpx;
		margin-bottom: 50rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.right_box{
		width: 100%;
		min-height: 80rpx;
		margin-bottom: 50rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.left_box image{
		width: 76rpx;
		height: 76rpx;
		margin-right: 20rpx;
		background-color: #FFFFFF;
		border-radius: 50%;
	}
	.right_box image{
		width: 76rpx;
		height: 76rpx;
		margin-left: 20rpx;
		background-color: #FFFFFF;
		border-radius: 50%;
	}
	.left_chat_con{
		min-height: 75rpx;
		max-width: 402rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	    padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
	}
	.right_chat_c{
		min-height: 75rpx;
		max-width: 402rpx;
		border-radius: 20rpx;
		background-color: #FFF9DF;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
	}
    .left_jt{
		  border-top: 10rpx solid transparent;
		  border-right: 15rpx solid #FFFFFF;
		  border-bottom: 10rpx solid transparent;
	}
	.right_jt{
		border-top: 10rpx solid transparent;
		border-left: 15rpx solid #FFF9DF;
		border-bottom: 10rpx solid transparent;
	}
	.btm_box{
		width: 92%;
		height: 76rpx;
		position: absolute;
		bottom: 1.5%;
		left: 4%;
		background-color: #FFFFFF;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.input_class{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	input{
		margin-left: 40rpx;
		font-size: 30rpx;
	}
	.btm_btn{
		width: 200rpx;
		height: 76rpx;
		background: linear-gradient(126deg, #FFDD47, #FCB630);
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>
